<template>
  <div class="announcement ">
    <div class="platform">
      <div class="header ">
        <div class="title">{{ notice.title }}</div>
        <div class="desc">
          <div class="tag">{{ notice.author }}</div>
          <img src="@/assets/images/goodsDetails/timer.png" alt="">
          <span>{{ notice.create_time }}</span>
        </div>
      </div>
      <div class="content">
        <p class="duan" v-for="(item, index) in notice.content" :key="index">{{ item }}</p>
        <div class="images duan" >
          <img :src="notice.cover" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { getNnotice } from '@/api/index'
export default {
  data () {
    return {
      notice: {}
    }
  },
  created () {
    this.getData()
    // this.$nextTick(() => {
    //   let scroll = new BScroll('.wrapper', { 
    //     scrollY: true,
    //     click: true,
    //     bounce: false
    //   })
    // })
  },
  methods: {
    getData () {
      getNnotice({ notice_id: this.$route.query.notice_id }).then(res => {
        console.log(res.data.content)
        this.notice = res.data
        this.notice.content = res.data.content.split('\n')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.announcement {
  width: 100%;
  background: #ffffff;
  height: 100vh;
  .platform {
    
    background: #ffffff;
  }
  .header {
    height: 95px;
    width: 100%;
    border-top: 0.5px solid rgb(243, 243, 243);
    border-bottom: 0.5px solid rgb(243, 243, 243);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    justify-content: center;
    padding: 0 15px;
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #2f2f2f;
      letter-spacing:1px;
      margin-bottom: 14px;
    }
    .desc {
      display: flex;
      align-items: center;

      .tag {
        font-size: 10px;
        font-weight: 400;
        padding: 0 5px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFDD07;
        border-radius:4px;
      }
      img {
        width: 12px;
        height: 12px;
        margin: 0 7px 0 12px;
      }
      span {
        font-size: 10px;
        color: #999999;
      }
    }
  }
  .content {
    font-size: 15px;
    letter-spacing:1px;
    color: #2f2f2f;
    font-weight: 400;
    padding: 13px 15px 10px;
    height: auto;
    .duan {
      margin-top: 12px;
      text-indent: 32.5px;
      line-height: 21px;
    }
    .images{
      img {
        width: 100%;
        height: auto;
        display: block;
      }
    }
  }
}
</style>